<template>
  <div class="import-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>批量导入员工</span>
        </div>
        <!-- card body -->
        <!-- 用法: 父传子两个回调函数 -->
        <UploadExecl
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入excel 时间格式化通用方法
import { formatExcelDate } from '@/utils'
// 导入后台接口上传读取到的excel员工数据接口
import { importEmployees } from '@/api/employees'

export default {
  methods: {
    // 读取选择的excel文件之前会执行这个校验函数
    // 作用: 校验格式和大小 => 通过true 否则false
    // file文件信息对象
    beforeUpload (file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 校验通过后执行
    // header => 读取到的excel表头
    // result => 读取到的excel数据
    async handleSuccess ({ header, results }) {
      // console.log(header, results)
      // console.table(results)
      await importEmployees(this.transformResults(results))
      this.$message.success('导入员工数据成功')
      // 返回员工列表 => 查看导入到数据
      this.$router.back()
    },
    transformResults (results) {
      // 根据读取的数据,设置中文key对应后台中的英文key
      const zhToen = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const newArr = []
      // item => 中文key的员工数据
      results.forEach(item => {
        const newItem = {}
        for (const zhKey in item) {
          // 映射 获取enkey 英文属性
          const enKey = zhToen[zhKey]
          // 处理excel读取到的事件 => timeOfEntry || correctionTime
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            newItem[enKey] = formatExcelDate(item[zhKey], '-1')
          } else {
            // 放到新对象并赋值
            newItem[enKey] = item[zhKey]
          }
        }
        // 新对象push到新数组
        newArr.push(newItem)
      })
      // 返回新数组(处理完的数据)
      return newArr
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
